<script setup lang="js">
import { ref } from "vue";
import { mobileRules, passwordRules } from "@/utils/rules";
import { useRouter } from "vue-router";

const router = useRouter()

const userPhone = ref("13666668888")
const password = ref("12345678")
const agree = ref("false")

const showpassword = ref(false)

const login = () => {
  console.log('登录');
  router.push('/')
}
</script>

<template>
  <div class="container">
    <div class="login">
      <h1 class="title">登录</h1>
      <van-form @submit="login">
        <van-field
          v-model="userPhone"
          required
          center
          :right-icon="userPhone ? 'close' : ''"
          label="手机号："
          placeholder="请输入手机号"
          :rules="mobileRules"
          @click-right-icon="userPhone = ''"
        ></van-field>
        <van-field
          v-model="password"
          center
          required
          label="密码："
          placeholder="请输入密码"
          :rules="passwordRules"
          :type="showpassword ? 'text' : 'password'"
          :right-icon="showpassword ? 'eye-o' : 'closed-eye'"
          @click-right-icon="showpassword = !showpassword"
        >
        </van-field>
        <div class="agree">
          <van-checkbox v-model="agree" icon-size="16px">
            <span>我已同意</span>
            <a href="javascript:;">用户协议</a>
            <span>及</span>
            <a href="javascript:;">隐私条款</a>
          </van-checkbox>
        </div>
        <div class="btn">
          <van-button
            plain
            hairline
            size="normal"
            block
            round
            type="primary"
            native-type="submit"
            >登陆</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<style lang="scss">
.container {
  background-color: #f7f8fa;
  height: 100vh;
  padding-top: 20vh;
  .title {
    font-size: 24px;
    color: #22211f;
  }

  .login {
    height: 30vh;
    border-radius: 5vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    .agree {
      padding: 2vh 0;
    }
    .btn {
      width: 50vw;
      margin: 0 auto;
    }
  }
}
</style>
